<!--
 * @Description: 教师情况登记表
 * @Autor: dyx
 * @Date: 2023-05-30 14:36:16
 * @LastEditTime: 2023-06-02 14:52:37
-->
<template>
  <div class="TISchedule">
    <div style="padding-right: 7px;">
      <el-button type="primary" style="float:right" @click="exportWord"
        >导出Word</el-button
      >
    </div>
    <div class="mytable" v-loading="loading">
      <div class="table_title">教师情况登记表</div>
      <table>
        <tr height="45px">
          <td width="100px">
            姓名
          </td>
          <td width="130px"></td>
          <td width="80px">
            性别
          </td>
          <td width="80px"></td>
          <td width="170px">
            出生年月
          </td>
          <td width="170px"></td>
          <td rowspan="4">
            1 寸 照片
          </td>
        </tr>
        <tr height="45px">
          <td width="100px">
            政治面貌
          </td>
          <td width="100px"></td>
          <td width="80px" colspan="2">
            身份证号码
          </td>

          <td width="170px" colspan="2"></td>
        </tr>

        <tr height="45px">
          <td width="100px">
            文化程度
          </td>
          <td colspan="5">
            <div class="col_" style="text-align:left">
              <span>1111</span>
              <span>所学专业</span>
              <span>2222</span>
              <span>工作时间</span>
              <span>3333</span>
            </div>
          </td>
        </tr>
        <tr height="45px">
          <td width="100px">
            技术职称
          </td>
          <td colspan="5">
            <div class="col_" style="text-align:left">
              <span>1111</span>
              <span>行政职务</span>
              <span>2222</span>
              <span>技能等级</span>
              <span>3333</span>
            </div>
          </td>
        </tr>
        <tr height="45px">
          <td width="100px">
            任教科目
          </td>
          <td colspan="2"></td>
          <td colspan="3">从事安全生产培训工作时间</td>
        </tr>
        <tr height="45px">
          <td width="100px">
            工作单位
          </td>
          <td colspan="4"></td>
          <td>专职/兼职</td>
          <td></td>
        </tr>
        <tr height="45px">
          <td width="100px">
            详细地址
          </td>
          <td colspan="4"></td>
          <td>固定电话</td>
          <td></td>
        </tr>
        <tr height="45px">
          <td width="100px">
            移动电话
          </td>
          <td colspan="2"></td>
          <td>邮箱</td>
          <td colspan="3"></td>
        </tr>

        <tr height="345px">
          <td width="100px">
            个人简历
          </td>
          <td colspan="6"></td>
        </tr>
        <tr height="345px">
          <td width="100px">
            主要教学科研成果
          </td>
          <td colspan="6"></td>
        </tr>
        <tr height="45px">
          <td width="100px">
            备注
          </td>
          <td colspan="6" style="text-align:left">
            身份证复印件， 师资岗位合格证，学历证明， 技术职称证明，
            相关业务培训证明复印件 等附后。
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>
<script>
import request from "@/utils/request";
export default {
  name: "TISchedule",
  data() {
    return {
      loading: true,
      dataForm: {},
      list: [],
      radio: 3
    };
  },
  created() {},
  methods: {
    init(id) {
      this.loading = true;

      request({
        url: "/api/class_archives/generateA1/" + id+`?organizeId=${this.$store.getters.organizeId}`,
        method: "get"
      }).then(res => {
        this.dataForm = res.data;
        // 创建10位数组
        this.list = Array.apply(null, { length: 10 }).map(() => {
          return { xh: "", kcmc: "", xs: "", ckjc: "", xm: "", xl: "", zw: "" };
        });
        // 获取数据数组长度
        let lgh = this.dataForm.childrenVOList.length;
        // 替换数组
        this.list.splice(0, lgh, ...this.dataForm.childrenVOList);
        this.loading = false;
      });
    },
    exportWord() {
      this.dataForm.childrenVOList = this.list;
      for (let key in this.dataForm) {
        if (Array.isArray(this.dataForm[key])) {
          if (key == "childrenVOList") {
            this.dataForm[key].forEach(item => {
              for (let key2 in item) {
                if (item[key2] == null) {
                  item[key2] = "";
                }
              }
            });
          } else {
            this.dataForm[key] = this.dataForm[key].join(",");
          }
        } else if (this.dataForm[key] == null) {
          this.dataForm[key] = "";
        }
      }
      this.dataForm.organizeId = this.$store.getters.organizeId;
      request({
        responseType: "blob",
        url: "/api/class_archives/generateA1Export",
        method: "post",
        data: this.dataForm
      }).then(res => {
        // console.log(res, 123);
        var debug = res;
        if (debug) {
          var a = document.createElement("a");
          a.download = "教师情况登记表.docx";
          a.style.display = "none";
          var blob = new Blob([debug], { type: "application/x-msdownload" });
          a.href = URL.createObjectURL(blob);
          document.body.appendChild(a);
          a.click();
          document.body.removeChild(a);
        }
      });
    }
  }
};
</script>
<style scoped lang="scss">
// 引入公共样式
@import "./TABLESTYLE.scss";
table {
  td {
    padding: 0 !important;
  }
}
.col_ {
  width: 100%;
  span {
    display: inline-block;
    height: 45px;
    border-right: 1px solid #000;
    vertical-align: top;
    text-align: center;
    line-height: 45px;
    &:nth-of-type(1) {
      width: 100px;
    }
    &:nth-of-type(2) {
      width: 110px;
    }
    &:nth-of-type(3) {
      width: 150px;
    }
    &:nth-of-type(4) {
      width: 110px;
    }
    &:nth-of-type(5) {
      border: none;
      width: 155px;
    }
  }
}
</style>
